<template>
  <s-layout class="set-wrap" title="品牌入驻" :bgStyle="{ color: '#f7f7f7' }">
    <s-empty v-if="state.list.length === 0 && !state.loading" text="暂无常见问题" icon="/static/collect-empty.png" />

    <view class="flex flex-col p-4 pb-0 bg-white">
      <view class="flex gap-1 items-center">
        <image src="/static/18714693341.png" class="size-6" mode="scaleToFill" />
        <view class="text-[16px] text-[#333333]">经营者信息</view>
      </view>
      <view class="flex overflow-hidden flex-col bg-white rounded-lg">
        <view class="flex gap-7 items-center py-2">
          <view class="text-[15px] text-[#333333] flex-none"> 品牌名称 </view>
          <uni-easyinput
            v-model="state.name"
            type="text"
            placeholder="请填写品牌名称"
            :inputBorder="false"
            maxlength="4"
            placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
          />
        </view>
        <!-- maxlength -->
        <u-line></u-line>
        <view class="flex relative gap-7 items-center py-2">
          <view class="size-full absolute inset-0 z-50" @click="state.regionShow = true"></view>

          <view class="text-[15px] text-[#333333] flex-none"> 所属区域 </view>
          <uni-easyinput
            v-model="state.region"
            type="text"
            placeholder="请选择所属区域"
            :inputBorder="false"
            disabled
            :styles="{ disableColor: '#fff', color: '#333' }"
            placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
          >
            <template #right>
              <u-icon name="arrow-right"></u-icon>
            </template>
          </uni-easyinput>
        </view>
        <u-line></u-line>
        <view class="flex relative gap-7 items-center py-2">
          <!-- <view class="size-full absolute inset-0 z-50" @click="handleAddress"></view> -->
          <view class="text-[15px] text-[#333333] flex-none"> 详细地址 </view>

          <uni-easyinput
            v-model="state.address"
            type="text"
            placeholder="请填写详细地址"
            :inputBorder="false"
            :styles="{ disableColor: '#fff', color: '#333' }"
            placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
          >
            <!-- <template #right>
              <u-icon name="arrow-right"></u-icon>
            </template> -->
          </uni-easyinput>
        </view>
        <u-line></u-line>
        <view class="flex gap-7 items-center py-2">
          <view class="text-[15px] text-[#333333] flex-none"> 法人代表 </view>
          <uni-easyinput
            v-model="state.frname"
            type="text"
            placeholder="请填写法人代表"
            :inputBorder="false"
            placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
          />
        </view>
        <u-line></u-line>
        <view class="flex gap-7 items-center py-2">
          <view class="text-[15px] text-[#333333] flex-none"> 联系电话 </view>
          <uni-easyinput
            v-model="state.mobile"
            type="number"
            placeholder="请填写联系电话"
            :inputBorder="false"
            placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
          />
        </view>
        <u-line></u-line>
        <view class="flex flex-col gap-4 py-4">
          <view class="text-[15px] text-[#333333] flex-none"> 营业执照 </view>

          <s-uploader
            v-model:url="state.license_image"
            fileMediatype="image"
            limit="1"
            mode="grid"
            :imageStyles="{ width: '168rpx', height: '168rpx' }"
          >
          </s-uploader>
        </view>
        <u-line></u-line>
        <view class="flex flex-col gap-4 py-4">
          <view class="text-[15px] text-[#333333] flex-none"> 身份证正面 </view>

          <s-uploader
            v-model:url="state.idcarda_image"
            fileMediatype="image"
            limit="1"
            mode="grid"
            :imageStyles="{ width: '168rpx', height: '168rpx' }"
          >
          </s-uploader>
        </view>
        <u-line></u-line>
        <view class="flex flex-col gap-4 py-4">
          <view class="text-[15px] text-[#333333] flex-none"> 身份证反面 </view>

          <s-uploader
            v-model:url="state.idcardb_image"
            fileMediatype="image"
            limit="1"
            mode="grid"
            :imageStyles="{ width: '168rpx', height: '168rpx' }"
          >
          </s-uploader>
        </view>
        <view class="flex items-center pb-4">
          <u-checkbox-group @change="checkboxGroupChange">
            <u-checkbox v-model="state.checked" shape="circle"></u-checkbox>
          </u-checkbox-group>
          <view class="text-[.8125rem] text-[#616161] flex items-center">
            我已阅读并同意相关条款
            <view class="text-[#FF1515]" @click="toUserAgreement"> 《品牌入驻》 </view>
          </view>
        </view>
      </view>
    </view>
    <view class="h-[50px]"></view>

    <view class="fixed right-0 bottom-0 left-0 p-4 bg-white">
      <view class="overflow-hidden py-3 w-full rounded-lg bg-[#0788C8] grid place-items-center" @click="toApply">
        <view class="font-medium text-[16px] text-[#FFFFFF]"> 申请品牌 </view>
      </view>
    </view>
    <!--  -->
    <su-region-picker :show="state.regionShow" @cancel="state.regionShow = false" @confirm="onRegionConfirm"> </su-region-picker>
  </s-layout>
</template>

<script setup>
  import { ref } from 'vue';
  import sheep from '@/sheep';

  const state = ref({
    regionShow: false,
    list: [],
    loading: true,
    name: '', // 店铺名称
    region: '', // 所属区域
    address: '', // 详细地址
    frname: '', // 法人代表
    mobile: '', // 联系电话
    province: '', // 省份
    city: '', // 城市
    district: '', // 区县
    license_image: '', // 营业执照
    idcardb_image: '', // 身份证正面
    idcarda_image: '', // 身份证反面
    checked: false,
  });
  // if (process.env.NODE_ENV == 'development') {
  //   state.value.name = '测试品牌';
  //   state.value.region = '';
  //   state.value.address = '四川省峨眉山市峨眉山风景区';
  //   state.value.frname = '测试法人';
  //   state.value.mobile = '18599996666';
  //   state.value.license_image = '';
  //   state.value.province = '四川省';
  //   state.value.city = '峨眉山市';
  //   state.value.district = '峨眉山风景区';
  // }
  //-----------
  function toApply() {
    let obj = {
      name: state.value.name,
      // region: state.value.region,
      address: state.value.address,
      frname: state.value.frname,
      mobile: state.value.mobile,
      license_image: state.value.license_image,
      province: state.value.province,
      city: state.value.city,
      district: state.value.district,
      idcardb_image: state.value.idcardb_image,
      idcarda_image: state.value.idcarda_image,
    };
    sheep.$api.yy.applyBrand(obj).then((res) => {
      if (res.code === 1) {
        uni.showToast({
          title: '申请成功',
          icon: 'none',
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 1000);
      }
    });
  }
  function onRegionConfirm({ province_name, city_name, district_name }) {
    console.log('🚀 ~ onRegionConfirm ~ district_name:', district_name);
    console.log('🚀 ~ onRegionConfirm ~ city_name:', city_name);
    console.log('🚀 ~ onRegionConfirm ~ province_name:', province_name);

    state.value.province = province_name;
    state.value.city = city_name;
    state.value.district = district_name;
    state.value.region = province_name + city_name + district_name;
    state.value.regionShow = false;
  }
  function handleAddress() {
    uni.chooseLocation({
      success__: function (res) {
        console.log('位置名称：' + res.name);
        console.log('详细地址：' + res.address);
        console.log('纬度：' + res.latitude);
        console.log('经度：' + res.longitude);
        state.value.address = res.address;
      },
    });
  }
  function checkboxGroupChange() {
    state.value.checked = !state.value.checked;
  }
  function toUserAgreement() {
    uni.navigateTo({
      url: '/pages/public/richtext?id=7&title=品牌入驻',
    });
  }
</script>

<style lang="scss" scoped>
  :deep() {
    .uni-forms-item__label .label-text {
      font-size: 28rpx !important;
      color: #333333 !important;
      line-height: normal !important;
    }

    .uni-easyinput__content-input {
      font-size: 28rpx !important;
      color: #333333 !important;
      line-height: normal !important;
      padding-left: 0 !important;
    }

    .uni-easyinput__content-textarea {
      font-size: 28rpx !important;
      color: #333333 !important;
      line-height: normal !important;
      margin-top: 8rpx !important;
    }

    .uni-icons {
      font-size: 40rpx !important;
    }

    .is-textarea-icon {
      margin-top: 22rpx;
    }

    .is-disabled {
      color: #333333;
    }
  }
</style>
